<template>
  <div>
    <el-dialog
      :visible="visible"
      :title="title"
      :width="width"
      append-to-body
      @close="close"
      @closed="closed"
    >
      <el-form
        ref="depotDataForm"
        :model="depotDataForm"
        :rules="rules"
        :disabled="operation === 0"
        label-width="125px"
        label-position="right"
        label-suffix=":"
      >

        <el-form-item :label="$t('goodsSKULang.warehouseOutDocNo')" prop="orderNo">
          <el-input
            v-model="depotDataForm.orderNo"
            type="textarea"
            :rows="4"
            :placeholder="$t('cutOffOrderLang.outOrderPleaseEnter')"
            clearable
            style="width: 50%"
          />
        </el-form-item>
        <el-form-item :label="$t('problemItemLang.problemType')" prop="issueType">
          <el-select
            v-model="depotDataForm.issueType"
            :placeholder="$t('pleaseSelect')"
            clearable
            style="width: 300px"
            @change="handleProblemTypeChange"
          >
            <el-option
              v-for="item in problemTypeOptions"
              :key="item.value"
              :value="item.value"
              :label="$t(item.title)"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('problemItemLang.problemDesc')" prop="issueDesc">
          <el-input
            v-model="depotDataForm.issueDesc"
            :placeholder="$t('problemItemLang.problemDesc')"
            clearable
            style="width: 50%"
          />
        </el-form-item>
        <el-form-item v-if="displyUpPics" :label="$t('upPic')" prop="files">
          <div style="display: flex; flex-direction: column;">
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              list-type="picture-card"
              :on-success="handleSuccess1"
              :on-error="handleError"
              :file-list="fileList1"
              :limit="1"
              :before-upload="beforeUpload"
            >
              <i v-if="fileList1.length < 1" class="el-icon-plus" />
              <div slot="tip" class="el-upload__tip">{{ $t('problemItemLang.uploadPackagingImages') }}</div>
            </el-upload>
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              list-type="picture-card"
              :on-success="handleSuccess2"
              :on-error="handleError"
              :file-list="fileList2"
              :limit="1"
              :before-upload="beforeUpload"
            >
              <i class="el-icon-plus" />
              <div slot="tip" class="el-upload__tip">{{ $t('problemItemLang.uploadWaybillImages') }}</div>
            </el-upload>
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              list-type="picture-card"
              :on-success="handleSuccess3"
              :on-error="handleError"
              :file-list="fileList3"
              :limit="1"
              :before-upload="beforeUpload"
            >
              <i class="el-icon-plus" />
              <div slot="tip" class="el-upload__tip">{{ $t('problemItemLang.uploadItemImages') }}</div>
            </el-upload>
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              list-type="picture-card"
              :on-success="handleSuccess4"
              :on-error="handleError"
              :file-list="fileList4"
              :limit="1"
              :before-upload="beforeUpload"
            >
              <i class="el-icon-plus" />
              <div slot="tip" class="el-upload__tip">{{ $t('problemItemLang.uploadItemImages') }}</div>
            </el-upload>
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              list-type="picture-card"
              :on-success="handleSuccess5"
              :on-error="handleError"
              :file-list="fileList5"
              :limit="1"
              :before-upload="beforeUpload"
            >
              <i class="el-icon-plus" />
              <div slot="tip" class="el-upload__tip">{{ $t('problemItemLang.uploadItemImages') }}</div>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="warning" plain size="small" @click="close">{{
          $t("cancel")
        }}</el-button>
        <el-button
          type="primary"
          size="small"
          :loading="submitLoading"
          @click="handleSubmit"
        >{{ $t("submit") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import to from 'await-to-js'
import { getDictOptionList } from '@/utils/dictUtils'
import { problemTypeOptionDict } from '@/utils/dictData'
import { addIssue } from '@/api/business/operateManage/problemItem'
export default {
  name: 'DepotForm',
  props: {
    value: {
      type: Number,
      default: undefined
    },
    orderNo: {
      type: String,
      default: undefined
    },
    visible: {
      type: Boolean,
      default: undefined
    },
    operation: {
      type: Number,
      default: 0 // 0查看 1新增 2修改
    },
    title: {
      type: String,
      default: null
    },
    width: {
      type: String,
      default: '750px'
    }
  },
  data() {
    return {
      isVisible: false,
      submitLoading: false,
      displyUpPics: false,
      uploadUrl: process.env.VUE_APP_BASE_API + '/issue/uploadPic',
      pic1: '',
      pic2: '',
      pic3: '',
      pic4: '',
      pic5: '',
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: [],
      problemTypeOptions: getDictOptionList(problemTypeOptionDict), // 问题件类型
      depotDataForm: {
        orderNo: null,
        issueType: null,
        files: []
      },
      rules: {
        orderNo: {
          required: true,
          message: this.$t('cutOffOrderLang.outOrderPleaseEnter'),
          trigger: 'change'
        },
        issueType: {
          required: true,
          message: this.$t('pleaseSelect'),
          trigger: 'change'
        }
      }
    }
  },
  watch: {
    orderNo: {
      handler(newVal, oldVal) {
        if (newVal != null && newVal !== undefined && newVal !== oldVal) {
          this.depotDataForm.orderNo = newVal // 更新orderNo
        }
      }
    }
  },
  created() {
    if (this.orderNo) {
      this.depotDataForm.orderNo = this.orderNo // 在创建时回填 orderNo
    }
  },
  methods: {
    // 清空表单
    reset() {
      this.depotDataForm = {
        orderNo: null,
        issueType: null,
        files: []
      }
      this.displyUpPics = false
      this.fileList1 = []
      this.fileList2 = []
      this.fileList3 = []
      this.fileList4 = []
      this.fileList5 = []
      this.$refs.depotDataForm.resetFields()
    },
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/')
      if (!isImage) {
        this.$message.error(this.$t('uploadImageTip'))
      }
      return isImage
    },
    handleChange(file, fileList) {
      console.log(file, fileList)
    },
    handleSuccess1(response, file, fileList) {
      this.$message.success(this.$t('addSuccess'))
      if (response.returnCode === 10000) {
        this.pic1 = response.data
      }
    },
    handleSuccess2(response) {
      this.$message.success(this.$t('addSuccess'))
      if (response.returnCode === 10000) {
        this.pic2 = response.data
      }
    },
    handleSuccess3(response) {
      this.$message.success(this.$t('addSuccess'))
      if (response.returnCode === 10000) {
        this.pic3 = response.data
      }
    },
    handleSuccess4(response) {
      this.$message.success(this.$t('addSuccess'))
      if (response.returnCode === 10000) {
        this.pic4 = response.data
      }
    },
    handleSuccess5(response) {
      this.$message.success(this.$t('addSuccess'))
      if (response.returnCode === 10000) {
        this.pic5 = response.data
      }
    },
    // upload error
    handleError(err, file, fileList) {
      this.$message.error(this.$t('uploadError'))
      console.error(err, file, fileList)
    },
    // 问题件类型下拉监听
    handleProblemTypeChange(value) {
      if (value === 2) {
        this.displyUpPics = true
        this.$set(this.rules, 'files', { required: true, type: 'array', message: this.$t('pleaseSelect'), trigger: 'blur' })
      } else {
        this.displyUpPics = false
        this.$delete(this.rules, 'files')
      }
    },
    // 提交
    async handleSubmit() {
      const upfile = []
      if (this.depotDataForm.issueType === 2) {
        const fields = [
          { field: 'pic1', message: this.$t('problemItemLang.packagingImages') },
          { field: 'pic2', message: this.$t('problemItemLang.waybillImages') },
          { field: 'pic3', message: this.$t('problemItemLang.itemImages') },
          { field: 'pic4', message: this.$t('problemItemLang.itemImages') },
          { field: 'pic5', message: this.$t('problemItemLang.itemImages') }
        ]
        for (const item of fields) {
          if (!this[item.field]) {
            this.$message.error(this.$t('pleaseUpload') + `${item.message}`)
            return
          }
          upfile.push(this[item.field])
        }
      }
      this.depotDataForm.files = upfile
      const [err] = await to(this.$refs.depotDataForm.validate())
      if (err === null) {
        // 新增
        const res = await addIssue(this.depotDataForm)
        if (res.data === null && res.returnCode === 10000) {
          this.$message.success(this.$t('addSuccess'))
          this.reset()
          this.$emit('close')
        } else {
          this.$message.error(res.returnMsg)
        }
      }
    },
    // 关闭
    close() {
      this.$emit('close')
    },
    closed() {
      this.reset()
    }
  }
}
</script>

<style scoped>
.upload-demo {
  margin-bottom: 10px;
}
.el-upload__tip {
  font-size: 12px;
  color: #999;
}
</style>
